<template>
  <div class="mainbox">
    <div class="topbox">
      <div class="topboxletf">
        <el-link
          type="danger"
          style="margin: 0 20px"
          @click="handleDeleteDishes(multipleSelection)"
          >批量删除</el-link
        >
        <el-divider direction="vertical"></el-divider>
        <el-link
          type="primary"
          style="margin: 0 20px"
          @click="handleChangeDishesStatus((status = 1), multipleSelection)"
          >批量启售</el-link
        >
        <el-divider direction="vertical"></el-divider>
        <el-link
          type="danger"
          style="margin: 0 20px"
          @click="handleChangeDishesStatus((status = 0), multipleSelection)"
          >批量停售</el-link
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$router.push({ name: 'AddDishes', query: { isEdit: false } })"
          >新增菜品</el-button
        >
      </div>
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="菜品名称"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img
              :src="`${env}/common/download?name=${scope.row.image}`"
              alt=""
              style="width: 40px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="菜品分类">
        </el-table-column>
        <el-table-column prop="price" label="售价"> </el-table-column>
        <el-table-column prop="status" label="售卖状态">
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? "启售" : "停售" }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后操作时间">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleEdit(scope.row.id)"
              >修改</el-link
            >
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm
              title="要改变该菜品的状态吗？"
              @onConfirm="
                handleChangeDishesStatus(+!scope.row.status, [scope.row])
              "
            >
              <el-link slot="reference" type="primary">{{
                scope.row.status === 1 ? "停售" : "启售"
              }}</el-link>
            </el-popconfirm>
            <el-divider direction="vertical"></el-divider>
            <el-link type="danger" @click="handleDeleteDishes([scope.row])"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDishes, changeDishesStatus, deleteDishes } from "@/api/dishes";

export default {
  data() {
    return {
      env: process.env.VUE_APP_BASE_API,
      name: "",
      placeholder: "请输入菜品名称",
      currentPage: 1,
      tableData: [],
      multipleSelection: [],
      total: 0,
      pageInfo: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData(names) {
      this.name = names;
      let params;
      if (this.name) {
        params = { ...this.pageInfo, name: this.name };
      } else {
        params = { ...this.pageInfo };
      }
      getDishes(params).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.pageInfo.page = 1;
      this.pageInfo.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      this.getData();
    },
    handleDeleteDishes(arr) {
      deleteDishes({ ids: arr.map((item) => item.id).join() }).then(() => {
        this.getData();
      });
    },
    handleChangeDishesStatus(status, arr) {
      changeDishesStatus(status, {
        ids: arr.map((item) => item.id).join(),
      }).then(() => {
        this.$message.success("改变账号状态成功");
        this.getData();
      });
    },
    handleEdit(id) {
      this.$router.push({ name: "EditDishes", query: { isEdit: true, id } });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.topbox {
  display: flex;
  justify-content: space-between;
}

.table {
  margin-top: 10px;
}
</style>
